<template>
	<div class = "author" v-if = "authorInfo">
		<h3 class = "authorTitle">作者</h3>
		<div class = "info">
			<img :src="authorInfo[0].web_url" alt="">
			<p>{{authorInfo[0].user_name}} {{authorInfo[0].wb_name}}</p>
			<p>{{authorInfo[0].summary}}</p>
		</div>
	</div>
</template>

<script>
export default {
	name : 'author',
	props : ["authorInfo"],
/*	data () {
		authorMes: this.authorInfo
	},
	mounted () {
		console.log(this.authorInfo)
	},
	watch : {
		authorInfo () {
			console.log(this.authorInfo)
		}
	}*/
}
</script>

<style lang = "less" scoped>
	.author {
		margin-top:.6rem;
		.authorTitle {
			width:1.4rem;
			border-bottom:.06rem solid #000;
			padding-bottom:.4rem;
			font-size:.3rem;
		}
		.info {
			margin:.2rem 0 1.4rem;
			> img {
				width:.9rem;
				height:.9rem;
				border-radius:50%;
				float:left;
				margin-right:.3rem;
			}
			> h3 {
				line-height: .45rem;
				&:last-of-type {
					color:rgba(0,0,0,.6);
				}
			}
		}
	}
</style>